<template>
  <div class="createPost-container">
    <el-form class="form-container" :model="form" :rules="rules" ref="refForm" label-width="100px">
      <el-form-item label="类别名:" prop="name">
        <el-input
          type="text"
          maxlength="45"
          class="inline-input"
          placeholder="请输入类别名"
          v-model="form.name"
        ></el-input>
      </el-form-item>

      <el-form-item label="类别描述:" prop="describe">
        <el-input type="text" class="inline-input" placeholder="请输入类别描述" v-model="form.describe"></el-input>
      </el-form-item>

      <el-button
        style="margin-left: 10px;"
        v-loading="loading"
        type="primary"
        :disabled="isDisabled"
        @click="saveForm()"
      >确定</el-button>
    </el-form>
  </div>
</template>

<script>
import {
  feedbackTypeUpdateApi,
  feedbackTypeAddApi
} from "@/services/api/feedbackType";
import { form, grid } from "@/build";
import { Debounce } from "@/utils";
export default {
  name: "feedback-type-edit",
  components: {},

  mixins: [form, grid],

  props: ["id", "rowData"],
  data() {
    return {
      form: {
        name: (this.rowData && this.rowData.name) || "",
        describe: (this.rowData && this.rowData.describes) || ""
      },
      rules: {
        name: [
          { required: true, message: "类别名必须填写" },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符" }
        ],
        describe: [
          { required: true, message: "类别描述必须填写" },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符" }
        ]
      },
      isDisabled: false
    };
  },
  mounted() {
    this.bindSave(feedbackTypeUpdateApi, "updateForm", "form", {
      beforeSend: data => {
        this.handleDisable(true);
        return { ...data, id: this.id };
      },
      callback: ([result, data]) => {
        if (result) {
          this.$notify({
            title: "保存成功",
            type: "success",
            duration: 2000
          });
          this.cancel();
          this.$emit("on-success");
        } else {
          this.$notify({
            title: `保存失败.${data && data.message}`,
            type: "error",
            duration: 2000
          });
          this.handleDisable(false);
        }
      }
    });
    this.bindSave(feedbackTypeAddApi, "saveForm", "form", {
      beforeSend: data => {
        this.handleDisable(true);
        return {...data};
      },
      callback: ([result, data]) => {
        if (result) {
          this.$notify({
            title: "保存成功",
            type: "success",
            duration: 2000
          });
          this.cancel();
          this.$emit("on-success");
        } else {
          this.$notify({
            title: `保存失败.${data && data.message}`,
            type: "error",
            duration: 2000
          });
          this.handleDisable(false);
        }
      }
    });
  },
  methods: {
    saveForm() {
      this.doSave({
        action:
          this.id == null || this.id == undefined || this.id == ""
            ? "saveForm"
            : "updateForm",
        form: {
          name: "refForm",
          scrollToError: true
        }
      });
    },
    //是否开启和禁用发送
    handleDisable(val) {
      this.isDisabled = val;
    },
    cancel() {
      this.$emit("input", false);
    }
  }
};
</script>

<style lang="scss" scoped>
.image {
  width: 100px;
  height: 100px;
}
</style>
